$(function () {

    // 1.获取到地址栏中传递的数据 ==》 为了记录上个页面传递过来的数据
    let key = decodeURI(location.search.split('=')[1])

    // 填充这个页面的输入框
    $('.search_input').val(key)


    // 2.根据传递过来的关键字，进行渲染
    let obj = {
        proName: key,
        page: 1,
        pageSize: 10086
    }
    console.log(obj);


    // 3.数据的渲染封装
    function arrly() {
        $.ajax({
            // 请求类型
            type: "get",
            // 请求地址
            url: "/product/queryProduct",
            // 请求数据
            data: obj,
            // 返回的数据  'text', 'xml', 'json', 'script'
            dataType: "json",
            beforeSend: function () {
                $('.lt_product').html('<div class="loading"></div>')
            },
            success: function (res) {
                console.log(res)
                // ajax中使用 ==》 使用模板引擎
                setTimeout(function () {
                    let str = template('tmp', res)
                    $('.lt_product').html(str)
                }, 100)
            }
        })
    }

    arrly()


    // 4.点击搜索，根据新输入的关键字进行搜索
    $('.search_btn').click(function () {

        let text = $('.search_input').val()
        if (text.trim().length == 0) {
            mui.toast('请输入关键字')
            return
        }
        // 修改传递给后台的值
        obj.proName = text
        // 重新渲染
        arrly()
    })

})
